<template>
    <div class="login-page">
      <!-- 1.顶部栏  van-nav-bar-->
      <van-nav-bar title="面经登录" />
      <!-- 2表单  van-form-->
      <van-form @submit="onSubmit">
        <van-field v-model="username"  name="username" label="用户名:" placeholder="请输入用户名"
        :rules="[
          {required:true,message:'请输入用户名'},
          {pattern:/^\w{6,15}$/,message:'用户名6-15位'}
          ]"
        ></van-field>
        <van-field v-model="password" name="password" label="密码:" placeholder="请输入密码"
  
        :rules="[
          {required:true,message:'请输入用户名'},
          {pattern:/^\w{6,15}$/,message:'用户名6-15位'}
          ]"
        ></van-field>
        <!-- :rules组件库每个组件库都不一样 -->
        <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">
          登录
        </van-button>
        <a class="link" href="#/registar">没有有账号,去注册</a>
      </div>
      </van-form>
  
    </div>
  </template>
  
  <script>
    import { setToken } from "@/utils/storage.js"
    //导入接口
    import { UserLogin } from "@/api/user.js"
    export default{
      name:'login-page',
      data() {
        return{
          //声明属性名
          username:'',
          password:'',
        }
      },
      methods:{
        //注册按钮
       async onSubmit(value){
  
         //（1）发送ajax
         
          const data=await UserLogin(value)
          console.log(data)
          //保存token
          setToken(data.data.token)
          //提示
          this.$toast.success('登录成功')
          //（2）跳转详情页
          this.$router.push('/')

        }
      }
    }
  </script>
  
  <style>
    .link{
      color: #069;
      font-size: 12px;
      margin-top: 10px;
      float: right;
    }
  </style>
  